<template>
  <!--<el-row class="warp">-->
    <!--<el-col :span="24" class="warp-breadcrum">-->
      <!--<el-breadcrumb separator="/">-->
        <!--<el-breadcrumb-item :to="{ path: '/' }"><b>首页</b></el-breadcrumb-item>-->
      <!--</el-breadcrumb>-->
    <!--</el-col>-->
  <!--</el-row>-->
  <el-row>
    <el-row class="index-wrap">
        <el-col :span="24">
          <el-card shadow="hover">
            <h3 class="gg-index-title">您好,15652528248</h3>
            <p class="gg-index-welcome">欢迎来到智能外呼管理后台</p>
          </el-card>
        </el-col>
    </el-row>
    <el-row class="index-wrap">
      <el-col :span="8">
        <el-card shadow="hover" style="margin-right: 50px;">
          <el-row>
            <el-col :span="12">
              <div class="gg-wrapItemLeft gg-wrapItemGreen">
                <i class="fa fa-database"></i>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="gg-wrapItemRight">
                <h3 class="gg-index-title" style="font-size: 20px;">320</h3>
                <p class="gg-index-welcome">执行中的任务</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="margin-right: 25px;">
          <el-row>
            <el-col :span="12">
              <div class="gg-wrapItemLeft gg-wrapItemOrange">
                <i class="fa fa-database"></i>
              </div>

            </el-col>
            <el-col :span="12">
              <div class="gg-wrapItemRight">
                <h3 class="gg-index-title" style="font-size: 20px;">56</h3>
                <p class="gg-index-welcome">待执行的任务</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover" style="margin-left: 25px;">
          <el-row>
            <el-col :span="12">
              <div class="gg-wrapItemLeft gg-wrapItemLightRed">
                <i class="fa fa-database"></i>
              </div>

            </el-col>
            <el-col :span="12">
              <div class="gg-wrapItemRight">
                <h3 class="gg-index-title" style="font-size: 20px;">238920</h3>
                <p class="gg-index-welcome">已完成的任务</p>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </el-row>
</template>
<style scoped>
  .content-wrapper{
    background: #ebeff3 !important;
  }
  .index-wrap{
    margin: 15px auto;
    margin-bottom: 5%;
  }

  .gg-index-title{
    letter-spacing: 1px;
    font-size: 16px;
    color: #515458;
    white-space: nowrap;
  }
  .gg-index-welcome{
    font-size: 14px;
    letter-spacing: 1px;
    color: #999;
  }
  .gg-wrapItemLeft{
    width: 90px;
    height: 90px;
    border-radius: 50%;
    font-size: 30px;
    text-align: center;
    line-height: 90px;
  }
  .gg-wrapItemGreen{
    color: #fff;
    background: #5ebfab;
  }
  .gg-wrapItemOrange{
    color: #fff;
    background:#ffbd4a ;
  }
  .gg-wrapItemLightRed{
    color: #fff;
    background: #c76868;
  }
  .gg-wrapItemRight{

  }
</style>
